import React, { Component } from "react";
import "./Index.scss";
import {imgURL as baseImgPath} from "../../baseURL/baseURL"
import {
  getHomeTopTab,
  getHotRecommend,
  getNewRecommend,
  getHomeData,
} from "../../data/api";
import { Carousel } from "antd-mobile";
import {withRouter} from "react-router-dom"
class Index extends Component {
  page = 1;
  limit = 50;
  idCategory = 1;
  params = {};
  state = {
    activeTab: "recommend",
    tabData: [],
    hotRecommendData: [],
    newRecommendData: [],
    mobileData: [],
    televisionData: [],
    computerData: [],
    jiadianData: [],
    mobileLunboData: [
      {
        id: 1,
        url: "75b1e658-161e-4b12-83b0-abd2c1bead39.jpg",
      },
      {
        id: 2,
        url: "cfd733e0-4a8a-4b87-8f30-fb909025c647.jpg",
      },
      {
        id: 3,
        url: "2ba1e87f-f04e-40b5-8d99-63e035a9d752.jpg",
      },
    ],
    computerLunboData: [
      {
        id: 1,
        url: "00950b78-0fc6-4e88-b663-07dc46a2b6df.jpg",
      },
      {
        id: 2,
        url: "8974ee52-c261-440a-84d3-8f8c1bd43a6a.jpg",
      },
    ],
  };
  async componentDidMount() {
    let res_tab = await getHomeTopTab();
    // console.log(res_tab.data);
    let res_hotData = await getHotRecommend();
    // console.log(res_hotData.data);
    let res_newData = await getNewRecommend();
    // console.log(res_newData.data)
    this.setState({
      tabData: res_tab.data,
      hotRecommendData: res_hotData.data,
      newRecommendData: res_newData.data,
    });
  }
  handleTopic = (topicNum) => {
    // console.log(this.props)
    this.props.history.push("topic?id="+topicNum)
  }
  handleTab = async (tabName) => {
    this.setState({
      activeTab: tabName,
    });

    if (tabName === "mobile") {
      let params_mobile = this.params;
      this.page = 1;
      this.limit = 50;
      this.idCategory = 1;
      this.params.page = this.page;
      this.params.limit = this.limit;
      this.params.idCategory = this.idCategory;
      let res_mobileData = await getHomeData(params_mobile);
      // console.log(res_mobileData.data);
      this.setState({
        mobileData: res_mobileData.data.records,
      });
    }
    if (tabName === "television") {
      let params_television = this.params;
      this.page = 1;
      this.limit = 50;
      this.idCategory = 2;
      this.params.page = this.page;
      this.params.limit = this.limit;
      this.params.idCategory = this.idCategory;
      let res_televisionData = await getHomeData(params_television);
      // console.log(res_mobileData.data);
      this.setState({
        televisionData: res_televisionData.data.records,
      });
    }
    if (tabName === "computer") {
      let params_computer = this.params;
      this.page = 1;
      this.limit = 50;
      this.idCategory = 3;
      this.params.page = this.page;
      this.params.limit = this.limit;
      this.params.idCategory = this.idCategory;
      let res_computerData = await getHomeData(params_computer);
      // console.log(res_computerData.data);
      this.setState({
        computerData: res_computerData.data.records,
      });
    }
    if (tabName === "jiadian") {
      let params_jiadian = this.params;
      this.page = 1;
      this.limit = 50;
      this.idCategory = 4;
      this.params.page = this.page;
      this.params.limit = this.limit;
      this.params.idCategory = this.idCategory;
      let res_jiadianData = await getHomeData(params_jiadian);
      // console.log(res_jiadianData.data);
      this.setState({
        jiadianData: res_jiadianData.data.records,
      });
    }
  };
  handleRecommendItem = (goods_id) => {
    this.props.history.push("goodsDetail?"+goods_id)
  }
  render() {
    // console.log(this.state.tabData)
    return (
      <div className="appHome">
        {/* 主页顶部标签开始 */}
        <div className="homeTab">
          <div
            className={
              this.state.activeTab === "recommend"
                ? "homeTabItem active"
                : "homeTabItem"
            }
            onClick={this.handleTab.bind(this, "recommend")}
          >
            推荐
          </div>
          <div
            className={
              this.state.activeTab === "mobile"
                ? "homeTabItem active"
                : "homeTabItem"
            }
            onClick={this.handleTab.bind(this, "mobile")}
          >
            {this.state.tabData[0] && this.state.tabData[0].name}
          </div>
          <div
            className={
              this.state.activeTab === "television"
                ? "homeTabItem active"
                : "homeTabItem"
            }
            onClick={this.handleTab.bind(this, "television")}
          >
            {this.state.tabData[1] && this.state.tabData[1].name}
          </div>
          <div
            className={
              this.state.activeTab === "computer"
                ? "homeTabItem active"
                : "homeTabItem"
            }
            onClick={this.handleTab.bind(this, "computer")}
          >
            {this.state.tabData[2] && this.state.tabData[2].name}
          </div>
          <div
            className={
              this.state.activeTab === "jiadian"
                ? "homeTabItem active"
                : "homeTabItem"
            }
            onClick={this.handleTab.bind(this, "jiadian")}
          >
            {this.state.tabData[3] && this.state.tabData[3].name}
          </div>
        </div>
        {/* 主页顶部标签结束 */}
        {/* 主页主要内容开始 */}
        <div
          className={
            this.state.activeTab === "recommend"
              ? "homeContentRecommend"
              : "hidden"
          }
        >
          <div className="banner">
            <div className="bannerTop">
              <div onClick={this.handleTopic.bind(this,1)} className="bannerItem1">
                <img
                  src={baseImgPath + "4b1f6265-f751-44eb-86d6-8f2f5d4725ab.jpg"}
                  alt=""
                />
              </div>
              <div onClick={this.handleTopic.bind(this,2)} className="bannerItem2">
                <img
                  src={baseImgPath + "9f6604ff-2f3a-456c-aab3-dc2979ae0406.jpg"}
                  alt=""
                />
              </div>
              <div onClick={this.handleTopic.bind(this,3)} className="bannerItem3">
                <img
                  src={baseImgPath + "53d377be-ff01-4fb8-8e8b-e8d3c97678f6.jpg"}
                  alt=""
                />
              </div>
            </div>
            <div className="bannerBottom">
              <div onClick={this.handleTopic.bind(this,4)} className="bannerItem4">
                <img
                  src={baseImgPath + "01d2db50-7091-4299-b5d2-2cee0eec006c.jpg"}
                  alt=""
                />
              </div>
              <div onClick={this.handleTopic.bind(this,5)} className="bannerItem5">
                <img
                  src={
                    baseImgPath +
                    "74ae1ec2-9e00-4189-bbfe-9ac916375506.6gtx.jpg"
                  }
                  alt=""
                />
              </div>
              <div onClick={this.handleTopic.bind(this,6)} className="bannerItem6">
                <img
                  src={baseImgPath + "c2e2a916-ae91-4033-8996-db74e2d78872.jpg"}
                  alt=""
                />
              </div>
            </div>
          </div>
          {/* 热门推荐开始 */}
          <div className="hotRecommend">
            <div className="hotRecommendTitle">热门推荐</div>
            <div className="hotRecommendContent">
              {this.state.hotRecommendData.map((v) => {
                return (
                  <div className="contentItem" onClick={this.handleRecommendItem.bind(this,v.id)} key={v.id}>
                    <div className="contentItemLeft">
                      <img src={baseImgPath + v.pic} alt="" />
                    </div>
                    <div className="contentItemRight">
                      <div className="contentItemRightTop">
                        <p>{v.name}</p>
                        <span>{v.descript}</span>
                      </div>
                      <div className="contentItemRightBottom">
                        ￥<span>{v.price / 100}</span>.00
                      </div>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
          {/* 热门推荐结束 */}

          {/* 新品推荐开始 */}
          <div className="newRecommend">
            <div className="newRecommendTitle">新品推荐</div>
            <div className="newRecommendContent">
              {this.state.newRecommendData.map((v) => {
                return (
                  <div className="contentItem" onClick={this.handleRecommendItem.bind(this,v.id)} key={v.id}>
                    <div className="contentItemLeft">
                      <img src={baseImgPath + v.pic} alt="" />
                    </div>
                    <div className="contentItemRight">
                      <div className="contentItemRightTop">
                        <p>{v.name}</p>
                        <span>{v.descript}</span>
                      </div>
                      <div className="contentItemRightBottom">
                        ￥<span>{v.price / 100}</span>.00
                      </div>
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
          {/* 新品推荐结束 */}
        </div>
        <div
          className={
            this.state.activeTab === "mobile" ? "homeContentMobile" : "hidden"
          }
        >
          <div className="mobileLunbo" onClick={this.handleRecommendItem.bind(this,2)}>
            <Carousel autoplay infinite dots>
              {this.state.mobileLunboData.map((val) => (
                <div
                  key={val.id}
                  style={{
                    display: "inline-block",
                    width: "100%",
                    height: "200px",
                  }}
                >
                  <img
                    src={baseImgPath + val.url}
                    alt=""
                    style={{
                      width: "100%",
                      verticalAlign: "top",
                      height: "200px",
                    }}
                    onLoad={() => {
                      // fire window resize event to change height
                      window.dispatchEvent(new Event("resize"));
                      this.setState({ imgHeight: "200px" });
                    }}
                  />
                </div>
              ))}
            </Carousel>
          </div>
          <div className="mobileContent">
            {this.state.mobileData.map((v) => {
              return (
                <div className="mobileContentItem" key={v.id} onClick={this.handleRecommendItem.bind(this,v.id)}> 
                  <div className="contentItemLeft">
                    <img src={baseImgPath + v.pic} alt="" />
                  </div>
                  <div className="contentItemRight">
                    <div className="contentItemRightTop">
                      <p>{v.name}</p>
                      <span>{v.descript}</span>
                    </div>
                    <div className="contentItemRightBottom">
                      <p className="price">
                        ￥<span>{v.price / 100}</span>.00
                      </p>
                      <p className="stock">x{v.stock}</p>
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
        <div
          className={
            this.state.activeTab === "television"
              ? "homeContentTelevision"
              : "hidden"
          }
        >
          <div className="televisionBanner" onClick={this.handleRecommendItem.bind(this,11)}>
            <img
              src={baseImgPath + "14f9ce27-f133-4321-aeb5-aed470b794d6.jpg"}
              alt=""
            />
          </div>
          <div className="televisionContent">
            {this.state.televisionData.map((v) => {
              return (
                <div className="televisionContentItem" key={v.id} onClick={this.handleRecommendItem.bind(this,v.id)}>
                  <div className="itemLeft">
                    <img src={baseImgPath + v.pic} alt="" />
                  </div>
                  <div className="itemRight">
                    <div className="itemRightTop">
                      <p className="itemRightTopName">{v.name}</p>
                      <p className="itemRightTopDescript">{v.descript}</p>
                    </div>
                    <div className="itemRightBottom">
                      <p className="itemRightBottomPrice">
                        ￥<span>{v.price / 100}</span>.00
                      </p>
                      <p className="itemRightBottomStock">x{v.stock}</p>
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
        <div
          className={
            this.state.activeTab === "computer"
              ? "homeContentComputer"
              : "hidden"
          }
        >
          <div className="computerLunbo" onClick={this.handleRecommendItem.bind(this,15)}>
            <Carousel autoplay infinite dots>
              {this.state.computerLunboData.map((val) => (
                <div
                  key={val.id}
                  style={{
                    display: "inline-block",
                    width: "100%",
                    height: "200px",
                  }}
                >
                  <img
                    src={baseImgPath + val.url}
                    alt=""
                    style={{
                      width: "100%",
                      verticalAlign: "top",
                      height: "200px",
                    }}
                    onLoad={() => {
                      // fire window resize event to change height
                      window.dispatchEvent(new Event("resize"));
                      this.setState({ imgHeight: "200px" });
                    }}
                  />
                </div>
              ))}
            </Carousel>
          </div>
          <div className="computerContent">
            {this.state.computerData.map((v) => {
              return (
                <div className="computerContentItem" key={v.id} onClick={this.handleRecommendItem.bind(this,v.id)}>
                  <div className="itemLeft">
                    <img src={baseImgPath + v.pic} alt="" />
                  </div>
                  <div className="itemRight">
                    <div className="itemRightTop">
                      <p className="itemRightTopName">{v.name}</p>
                      <p className="itemRightTopDescript">{v.descript}</p>
                    </div>
                    <div className="itemRightBottom">
                      <p className="itemRightBottomPrice">
                        ￥<span>{v.price / 100}</span>.00
                      </p>
                      <p className="itemRightBottomStock">x{v.stock}</p>
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
        <div
          className={
            this.state.activeTab === "jiadian" ? "homeContentJiadian" : "hidden"
          }
        >
          <div className="jiadianBanner" onClick={this.handleRecommendItem.bind(this,24)}>
            <img
              src={baseImgPath + "0cbeb359-39de-42a9-9d19-96e9887a819e.jpg"}
              alt=""
            />
          </div>
          <div className="jiadianContent">
            {this.state.jiadianData.map((v) => {
              // console.log(v)
              return (
                <div className="jiadianContentItem" key={v.id} onClick={this.handleRecommendItem.bind(this,v.id)}>
                  <div className="itemLeft">
                    <img src={baseImgPath + v.pic} alt="" />
                  </div>
                  <div className="itemRight">
                    <div className="itemRightTop">
                      <p className="itemRightTopName">{v.name}</p>
                      <p className="itemRightTopDescript">{v.descript}</p>
                    </div>
                    <div className="itemRightBottom">
                      <p className="itemRightBottomPrice">
                        ￥<span>{v.price / 100}</span>.00
                      </p>
                      <p className="itemRightBottomStock">x{v.stock}</p>
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
        {/* 主页主要内容结束 */}
      </div>
    );
  }
}

export default withRouter(Index);
